<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
	
/* 	alert("${param.name}"); */
	function checkReg(){
		var f=document.regForm;
		if(f.name.value==""){
			alert("이름을 입력하세요!");
			f.name.focus();
			return false;
		}else if(f.id.value==""){
			alert("아이디를 입력하세요!");
			f.id.focus();
			return false;
		}else if(f.nick.value==""){
			alert("별명을 입력하세요!");
			f.nick.focus();
			return false;
		}else if(f.password.value==""){
			alert("패스워드를 입력하세요!");
			f.password.focus();
			return false;
		}else if(f.checkPassword.value==""){
			alert("패스워드확인하세요!");
			f.checkPassword.focus();
			return false;
		}else if(f.checkPassword.value!=f.password.value){
			alert("패스워드확인을 다시 해주세요!");
			f.checkPassword.value="";
			f.checkPassword.focus();
			return false;
		}else if(f.idCheck.value==""){
			alert("중복된 아이디입니다!");
			f.id.value("");
			f.id.focus();
			return false;
		}else if(f.nickCheck.value==""){
			alert("중복된 별명입니다!");
			f.nick.value("");
			f.nick.focus();
			return false;
		}else if(f.id.value.length>8){
			alert("아이디를 7자이내로 입력해주세요!");
			f.id.value("");
			f.id.focus();
			return false;
		}else if(f.nick.value.length>8){
			alert("별명을 7자이내로 입력해주세요!");
			f.nick.value("");
			f.nick.focus();
			return false;
		}
			f.submit();
	}
	var xhr;
	function createXMLHttpRequest(){
		if(window.ActiveXObject){
			xhr=new ActiveXObject("Microsoft.XMLHTTP");
		}else{
			xhr=new XMLHttpRequest();
		}	
		}
	function startRequest(){
		createXMLHttpRequest();
		xhr.onreadystatechange=callback;
		var id=document.getElementById("id").value;
		var url="../member.do?command=idCheck&id="+id;
		xhr.open("GET",url,true);
		xhr.send(null);
	}
	function callback(){
		if(xhr.readyState==4){
			if(xhr.status==200){
				/*  alert("1");  */
				var f=document.regForm;
				var jsonData=eval("("+xhr.responseText+")");
				var mess=jsonData.mess;
				var name=document.getElementById("id").value;
				document.getElementById("checkId").innerHTML=" "+name+" "+mess;
				if(mess=="생성할 수 없는 id입니다."){
					f.idCheck.value="";
				}else{
					f.idCheck.value="ok";
				} 
			}
		}
	}
	
	
	function startRequest2(){
		createXMLHttpRequest();
		xhr.onreadystatechange=callback2;
		var nick=document.getElementById("nick").value;
		var url="../member.do?command=nickCheck&nick="+nick;
		xhr.open("GET",url,true);
		xhr.send(null);
	}
	function callback2(){
		if(xhr.readyState==4){
			if(xhr.status==200){
				/*  alert("1");  */
				var f=document.regForm;
				var jsonData=eval("("+xhr.responseText+")");
				var mess2=jsonData.mess2;
				var nickName=document.getElementById("nick").value;
				/* alert("1"); */
				document.getElementById("checkNick").innerHTML=" "+nickName+" "+mess2;
			}if(mess2=="생성할 수 없는 별명입니다."){
				f.nickCheck.value="";
			}else{
				f.nickCheck.value="ok";
			} 
		}
	}
</script>
</head>
<body>
	<form name="regForm" action="../member.do" method="post" >
	<input type="hidden" name="command" value="registerMember">
	<input type="hidden" name="idFlag" value="">
	<input type="hidden" name="idCheck" value="">
	<input type="hidden" name="nickCheck" value="">
			<table width="900" border="0" cellpadding="5px" align="center">
		<tr height="20">
			<td align="center" colspan="2" ></td>
		</tr>
			<tr height="70"><!-- 1번째 줄 : DABANG 회원가입... 다방|도움말 -->
				<td align="left" colspan="2">
				<a href="${pageContext.request.contextPath }/cafe.do?command=cafe">
				<img src="${pageContext.request.contextPath }/img/register/dabang.png"></a>
					&nbsp;&nbsp;<a href="hello_register.jsp"><img src=
					"${pageContext.request.contextPath }/img/register/register_letter.png"></a>
			</td>
				<td align="right" colspan="2"></td>
			</tr>
			<tr height="105"><!-- 2번째 줄 : 약관동의/가입인증//정보입력//가입완료 그림 -->
				<td colspan="4" background="../img/register/input_register.JPG" width="600"></td>
			</tr>
			<tr height="20"></tr>
			<tr height="80"><!-- 3번째 줄 : 회원정보입력에 관한 내용 그림 -->
				<td colspan="4" background="../img/register/member_info_enter.png"></td>
			</tr>
			<tr height="20"></tr>
			<tr><!-- 4번째 줄 : Line image... -->
				<td colspan="4" background="../img/register/line.PNG"></td>
			</tr>
			<tr height="20"></tr>
			<tr><!-- 5 : 회원가입 내용들 -->
				<td width="95"></td>		<!-- 대표 width 길이 지정!! : 1번째 칸 = 여백부분 -->
				<td width="200">		<!-- 대표 width 길이 지정!! : 2번째 칸 = 설명부분 -->
					<table border="0" cellpadding="6" width="200">
						<tr>
							<td><font face="gothic"><b>&nbsp;&nbsp;&nbsp;이름</b></font></td>
						</tr>
						<tr>
							<td><font face="gothic"><b>&nbsp;&nbsp;&nbsp;아이디</b></font></td>
						</tr>
						<tr>
							<td><font face="gothic"><b>&nbsp;&nbsp;&nbsp;별명</b></font></td>
						</tr>
						<tr>
							<td><font face="gothic"><b>&nbsp;&nbsp;&nbsp;비밀번호</b></font></td>
						</tr>
						<tr>
							<td><font face="gothic"><b>&nbsp;&nbsp;&nbsp;비밀번호 확인</b></font></td>
						</tr>
					</table>
				</td>	
				<td width="100">		<!-- 대표 width 길이 지정!! : 3번째 칸 = 입력부분 -->
					<table border="0" cellpadding="4">
						<tr>
							<td>${param.name}
									<input type="hidden" value="${param.name}" id="name" name="name">
							</td>
						</tr>
						<tr>
							<td><input type="text" onkeyup="startRequest()" id="id" name="id"><br></td>
						</tr>
						<tr>
							<td><input type="text" onkeyup="startRequest2()" id="nick" name="nick"></td>
						</tr>
						<tr>
							<td><input type="password" id="password" name="password"></td>
						</tr>
						<tr>
							<td><input type="password" id="checkPassword"></td>
						</tr>
					</table>
				</td>	
				<td>		<!-- 대표 width 길이 지정!! : 4번째 칸 = 중복체크 부분 -->
					<table border="0" cellpadding="4" width="400">
						<tr>
							<td></td>
						</tr>
						<tr>
							<td><span id="checkId"></span><br></td>
						</tr>
						<tr>
							<td><span id="checkNick"></span></td>
						</tr>
						<tr>
							<td>&nbsp;</td>
						</tr>
						<tr>
							<td>&nbsp;</td>
						</tr>
					</table>
				</td>	
			</tr>
			<tr height="20"></tr>
			<tr><!-- 6 : Line image... -->
				<td colspan="4" background="../img/register/line.PNG"></td>
			</tr>
			<tr height="20"></tr>
			<tr><!-- 7 : 회원가입 버튼 -->
				<td align="center" colspan="4"><input type="image" value="회원가입" onclick="return checkReg()" 
					src="${pageContext.request.contextPath }/img/register/confirm_button.png"></td>
			</tr>
		</table>
	</form>		
</body>
</html>